<template>
  <div id="yzEditor">
    <div class="tools" v-if="options.isTools">
      <span title="分栏" :class="{ activeBtn: btnIndex == 1 }" @click="showView(1)" class="iconfont iconfenlan"></span>
      <span title="只看代码" :class="{ activeBtn: btnIndex == 2 }" @click="showView(2)" class="iconfont icondaima"></span>
      <span title="预览" :class="{ activeBtn: btnIndex == 3 }" @click="showView(3)" class="iconfont iconkanfangxuanfang"></span>

      <span title="重置编辑器" @click="reset" class="iconfont iconreset"></span>

      <!-- 触发按钮 -->
      <span title="上传" @click="upload" class="iconfont iconcloudupload"></span>
      <!-- 隐藏文件域 -->
      <input type="file" style="display: none" ref="filElem" @change="changeFile" />
      
      <span title="下载" @click="donwload" class="iconfont icondownload"></span>

      <span title="格式化" @click="format" class="iconfont iconindent-increase"></span>

      <div class="iconfont" style="width: 100px;">
        <input style="margin-right: 5px;" id="autoRunInput" type="checkbox" :checked="autoRun"
          v-model="autoRun" /><label for="autoRunInput">自动运行</label>
      </div>

      <div v-if="!autoRun" class="iconfont" style="margin-left: 10px;">
        <button @click="runCodePreview(true)" class="button">运行</button>
      </div>

      <a id="logo" style="float: right" :href="linkUrl" target="_blank">{{linkTitle}}</a>
    </div>

    <div id="myBody">
      <!-- 编辑器 -->
      <textarea ref="yanziEditor" style="width: 100%; height: 100%"></textarea>

      <!-- 预览区域 -->
      <iframe id="yanzi-view" allow="accelerometer; camera; encrypted-media; geolocation; gyroscope; microphone; midi"
        allowfullscreen="true" allowpaymentrequest="true" contenteditable="false" frameborder="0"></iframe>
    </div>
  </div>
</template>
   
<script src="./main.js"></script>
  
<style scoped lang="css" src="./style.css">
</style>
<style src="./global.css">
</style>
  